import React, { useEffect, useState } from 'react';
import { Layout, Nav, Button, Avatar, SideSheet, Modal, Notification, Breadcrumb } from '@douyinfe/semi-ui';
import { IconBell, IconHelpCircle, IconUserGroup, IconTiktokLogo, IconCustomize, IconHistogram, IconBytedanceLogo, IconDesktop, IconSetting, IconPhoneStroke, IconCommand, IconMoon, IconFeishuLogo } from '@douyinfe/semi-icons';
import "../../static/css/mainPage.css"
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import ConstantTab from '../../config/Constant';
import { userInfoStore } from '../../Store/userInfo';

export default function MainPage() {

    const { Header, Sider, Content } = Layout;
    const navigating = useNavigate();
    const urlMap = useLocation();
    const urlMapChinese = ["", "添加设备页面", "桌面端设备列表页面", "移动端设备列表页面", "信息筛选页面", "个人中心页面"];
    const urlMapEng = ["", "adding", "listDesktop", "listMobile", "filter", "setting"];

    const [siderVisible, setSiderVisible] = useState(false);
    const [callBackVisible, setCallBackVisible] = useState(false);
    const [questionVisible, setQuestionVisible] = useState(false);
    const [postMailVisible, setPostMailVisible] = useState(false);
    const { userInfo } = userInfoStore();

    //页面局部状态管理区域
    const siderChange = () => {
        setSiderVisible(!siderVisible);
    };
    const showDialog = () => {
        setCallBackVisible(true);
    };
    const closeDialog = () => {
        setCallBackVisible(false);
    }


    const showPostMailDialog = () => {
        setPostMailVisible(true);
    };
    const closePostMailDialog = () => {
        setPostMailVisible(false);
    }



    const showQuestionDialog = () => {
        setQuestionVisible(true);
    };
    const closeQuestionDialog = () => {
        setQuestionVisible(false);
    }

    //组件交互回调函数区域

    useEffect(() => {
        const tokenJson = localStorage.getItem('token');
        if (tokenJson) {
            const tokenStr = JSON.parse(tokenJson);
            const { token, openID } = tokenStr;
            if (token && Date.now() - openID <= 3600000 * 2) {
            }
            else {
                Notification.error(ConstantTab.TokenExpireNotify)
                navigating("/login");
            }
        }
        else {
            Notification.error(ConstantTab.TokenDisNotify)
            navigating("/login");
        }
    }, [])



    const routerChange = (val) => {
        if (val.itemKey !== "list") {
            navigating(`/index/${val.itemKey}`);
        }
    }

    const switchMode = () => {
        const body = document.body;
        if (body.hasAttribute('theme-mode')) {
            body.removeAttribute('theme-mode');
        } else {
            body.setAttribute('theme-mode', 'dark');
        }
    };

    return (
        <>
            <Layout style={{ border: '1px solid var(--semi-color-border)' }} className='mainPageLayout'>
                <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }} breakpoint={["md"]}>
                    <Nav
                        onClick={routerChange}
                        defaultSelectedKeys={[urlMap.pathname.split("/")[2]]}
                        style={{ maxWidth: 220, height: '100%' }}
                        items={[
                            { itemKey: 'dashboard', text: '数据概览', icon: <IconHistogram size="large" /> },
                            { itemKey: 'douyin', text: '抖音号', icon: <IconTiktokLogo size="large" /> },
                            { itemKey: 'doudian', text: '抖店管理', icon: <IconDesktop size="large" /> },
                            { itemKey: 'anchor', text: '主播管理', icon: <IconUserGroup size="large" /> },
                            { itemKey: 'servicer', text: '智能中控', icon: <IconCustomize size="large" /> },
                            { itemKey: 'adding', text: '添加设备', icon: <IconCustomize size="large" /> },
                            {
                                text: '设备管理',
                                icon: <IconHistogram />,
                                itemKey: "list",
                                items: [
                                    { itemKey: 'listDesktop', text: '桌面端列表信息', icon: <IconDesktop size="large" /> },
                                    { itemKey: 'listMobile', text: '移动端列表信息', icon: <IconPhoneStroke size="large" /> },
                                ],
                            },
                            { itemKey: 'filter', text: '信息筛选', icon: <IconCommand size="large" /> },
                            { itemKey: 'setting', text: '个人设置', icon: <IconSetting size="large" /> },
                            { itemKey: 'robot', text: '通知配置', icon: <IconFeishuLogo size="large" /> },
                        ]}
                        header={{
                            logo: < IconBytedanceLogo size='large' style={{
                                height: '20px',
                                color: 'var(--semi-color-text)'
                            }} />,
                            text: '抖播智邦',
                        }}
                        footer={{
                            collapseButton: true,
                        }}
                    />
                </Sider>
                <Layout>
                    <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
                        <Nav
                            mode="horizontal"
                            footer={
                                <>
                                    <Button
                                        theme="borderless"
                                        icon={<IconBell size="large" />}
                                        style={{
                                            color: 'var(--semi-color-text-2)',
                                            marginRight: '12px',
                                        }}
                                        onClick={showPostMailDialog}
                                    />
                                    <Button
                                        theme="borderless"
                                        icon={<IconMoon size="large" />}
                                        style={{
                                            color: 'var(--semi-color-text-2)',
                                            marginRight: '12px',
                                        }}
                                        onClick={switchMode}
                                    />
                                    <Button
                                        theme="borderless"
                                        icon={<IconHelpCircle size="large" />}
                                        style={{
                                            color: 'var(--semi-color-text-2)',
                                            marginRight: '12px',
                                        }}
                                        onClick={showQuestionDialog}
                                    />
                                    <Avatar color="orange" size="small" onClick={() => { navigating(`/index/dashboard`) }}>
                                        {userInfo.userName.slice(0, 3)}
                                    </Avatar>
                                    {/* 头像默认展示用户名前三位 */}
                                </>
                            }
                        ></Nav>
                    </Header>
                    <Content
                        style={{
                            padding: '10px',
                            background: 'rgba(var(--semi-grey-1), 1)'
                        }}
                    >
                        <Outlet />
                    </Content>
                </Layout>
            </Layout>


            <SideSheet title="滑动侧边栏" visible={siderVisible} onCancel={siderChange}>
                <p>This is the content of a basic sidesheet.</p>
                <p>Here is more content...</p>
            </SideSheet>

            <Modal title="意见反馈" visible={callBackVisible} closeOnEsc={true}
                onCancel={closeDialog} onOk={closeDialog}>
                这里是意见反馈<br />More content...
            </Modal>

            <Modal title="收件箱" visible={postMailVisible} closeOnEsc={true}
                onCancel={closePostMailDialog} onOk={closePostMailDialog}>
                这里是收件箱<br />More content...
            </Modal>


            <Modal title="问题解答" visible={questionVisible} closeOnEsc={true}
                onCancel={closeQuestionDialog} onOk={closeQuestionDialog}>
                这里是问题反馈<br />More content...
            </Modal>
        </>
    )
}
